<template>
	<view class="container">
		<view class="userInfo">
			<!-- <cloud-image width="150rpx" height="150rpx" v-if="" src="/static/avatar.png"></cloud-image> -->
			<image class="logo-img" v-if="this.uid" :src="this.avatar" v-on:click="setting()"></image>
			<image class="logo-img" src="/static/avatar.png" v-else  v-on:click="login()"></image>
			<view class="logo-title">
				<!-- <text class="uer-name" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text> -->
				<text class="uer-name" v-if="this.userName">{{this.userName}}</text>
				<text class="uer-name" v-else>点击登录</text>
			</view>
		</view>
		<view  style="border-radius: 40rpx;margin-top: -80rpx;background-color: #FFFFFF;">
			<view class="" style="padding-top: 40rpx;">
				<view class="" style="padding: 0 40rpx;">
					<text style="font-weight: 600;font-size: 36rpx;">我的游戏</text>
				</view>
				<view style="margin-top: 10rpx;">
					<view>
						<u-grid :border="false" col="4">
							<u-grid-item v-for="(listItem,listIndex) in categame" :key="listIndex" @click="navto(listItem.game_url)">
								<image :src="listItem.image" style="margin:20rpx 0;border-radius:20rpx;width: 128rpx;height: 128rpx;"></image>
								<text class="grid-text">{{listItem.name}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;">
				<view style="display: flex;margin-top: 40rpx;margin-bottom: 20rpx;padding: 0 40rpx;" v-on:click="authen()">
					<u--text prefixIcon="/static/xxtb.png" :size="15" iconStyle="width: 40rpx;height: 40rpx;margin-right:40rpx" :bold="true" style="color: #878C92;" text="实名认证" ></u--text>
					<u--text suffixIcon="/static/right.png" iconStyle="font-size: 18px" :size="14" align="right" color="#8C8C8C" ></u--text>
				</view>
				<view style="display: flex;margin-top: 40rpx;margin-bottom: 20rpx;padding: 0 40rpx;">
					<u--text prefixIcon="/static/xxtb2.png" :size="15" iconStyle="width: 40rpx;height: 40rpx;margin-right:40rpx" :bold="true" style="color: #878C92;" text="帮助中心"></u--text>
					<u--text suffixIcon="/static/right.png" iconStyle="font-size: 18px" :size="14" align="right" color="#8C8C8C" ></u--text>
				</view>
				<view style="display: flex;margin-top: 40rpx;margin-bottom: 20rpx;padding: 0 40rpx;" v-on:click="myMsg()">
					<u--text prefixIcon="/static/xxtb1.png" :size="15" iconStyle="width: 40rpx;height: 40rpx;margin-right:40rpx" :bold="true" style="color: #878C92;" text="我的消息" ></u--text>
					<u--text suffixIcon="/static/right.png" iconStyle="font-size: 18px" :size="14" align="right" color="#8C8C8C" ></u--text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getBanner,getRank,getCate,getGameListById} from  "@/api/api.js"
	export default {
		data() {
			return {
				page:1,
				limit:4,
				categame:[],
				uid:0,
				userName:null,
				avatar:null
			}
		},
		onLoad(){
			this.getgame();
			this.uid = uni.getStorageSync('uid')
			this.userName = uni.getStorageSync('user_name')
			this.avatar = uni.getStorageSync('avatar')
			console.log(this.avatar)
		},
		methods: {
			init(){
				this.getgame();
				this.uid = uni.getStorageSync('uid')
				this.userName = uni.getStorageSync('user_name')
				this.avatar = uni.getStorageSync('avatar')
			},
			navto(val){
				if (this.uid){
					uni.navigateTo({
						url:'/pages/webview/webview?gameurl='+val
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			getgame(){
				getRank(this.page,this.limit).then(res=>{
					this.categame = res.data
				});
			},
			authen(){
				uni.navigateTo({
					url:'/pages/authentication/form'
				})
			},
			login(){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			setting(){
				uni.navigateTo({
					url:'/pages/avatar/avatar'
				})
			},
			myMsg(){
				uni.navigateTo({
					url:'/pages/msg'
				})
			}
			
		}
	}
</script>

<style>
	.userInfo {
		text-align: center;
		padding: 20rpx;
		padding-top: 140rpx;
		padding-bottom: 160rpx;
		background-image: url(../../static/beiuj.png);
		background-size: 100% 100%;
		flex-direction: column;
		align-items: center;
	}
	.logo-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
	}
	.logo-title {
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.uer-name {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 38rpx;
		color: #FFFFFF;
	}
	.grid-text {
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:140rpx;
	}
	.gametext{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:240rpx;
	}
</style>
